<template>
  <div>
    <el-row>
      <el-col :span="18">
        <div>
          <h3 id="t2"> 博客列表</h3>
        </div>
        <div id="cardbox">
          <BlogCard class="BlogCard" v-if="!articleList"></BlogCard>
          <BlogCard class="BlogCard"
            v-else
            v-for="article in articleList"
            :key="article"
            :article="article"
          ></BlogCard>
          <el-pagination
            :currentPage="page.currentPage"
            :page-size="page.pageSize"
            layout="prev, pager, next"
            :total="page.pageSize * page.pageNum"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <h3 id="t3">博客热榜</h3>
        </div>
        <div id="rebang">
          <el-card class="box-card" shadow="never">
            <div v-for="(article, index) in HotArticle" :key="index" class="text item">
              <el-link :href="'/article/'+article.id" 
                :type="index === 0 ? 'primary' : index === 1 ? 'success' : index === 2 ? 'warning' : 'info'">
                {{ index+1 + ' ' + article.title }}
              </el-link>
            </div>
          </el-card>
        </div>
        <div>
          <h3 id="t4">热门标签</h3>
        </div>
        <el-card id="cloudWord" shadow="never" 
          style="margin-top: 20px; height:32vh; width: 18vw;"
        >
          <el-tag class="hottag" effect="plain" v-for="tag in tagList" :key="tag" @click="tagOnClick(tag.name)">{{tag.name}}</el-tag>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import api from '../../api/data.js'
import BlogCard from '@/components/BlogCard'
import { ElMessage } from 'element-plus'
export default {
  name: 'BlogFrontier',
  components: {
    BlogCard
  },
  data () {
    return {
      HotArticle: [],
      articleList: null,
      tagList: [],
      page: {
        currentPage: 1,
        pageSize: 5,
        pageNum: 1,
        category: '前沿技术',
      }
  }},
  methods: {
    tagOnClick (tagName) {
      this.$router.push({path: '/blogs', query: {tag: tagName}})
    },
    handleCurrentChange (val) {
      this.page.currentPage = val
      this.pageChange()
      // console.log(`current page: ${val}`)
    },
    pageChange () {
      api.getArticleByCategory({
        token: this.$store.state.token,
        category: this.page.category,
        pageSize: this.page.pageSize,
        currentPage: this.page.currentPage
      }).then((res) => {
        if (res.code === 342) {
          this.$store.commit('logout')
          this.$store.commit('tokenError')
          this.$router.push({path: '/login'})
        } else if (res.code < 300) {
          this.articleList = res.data.articleList
          this.page.currentPage = res.data.currentPage
          this.page.pageSize = res.data.pageSize
          this.page.pageNum = res.data.pageNum
          // console.log(this.articleList)
        } else {
          ElMessage.error(res.message)
        }
      })
    }
  },
  mounted () {
    this.pageChange() 
    api.articleRank({
      token: this.$store.state.token
    }).then((res) => {
      if (res.code === 342) {
        this.$store.commit('logout')
        this.$store.commit('tokenError')
        this.$router.push({path: '/login'})
      } else if (res.code < 300) {
        this.HotArticle = res.data.articleList
      } else {
        ElMessage.error(res.message)
      }
    })
    api.getAllTag({
      token: this.$store.state.token,
      pageSize: 45,
      currentPage: 1
    }).then((res) => {
      if (res.code === 342) {
        this.$store.commit('logout')
        this.$store.commit('tokenError')
        this.$router.push({path: '/login'})
      } else if (res.code < 300) {
        this.tagList = res.data.tagList
        this.tagList.splice(35, this.tagList.length-35);
      } else {
        ElMessage.error(res.message)
      }
    })
  }
}
</script>

<style scoped>
#t2 {
  margin-top: 5vh;
  margin-left: 8vw;
}
#cardbox {
  margin-left: 8vw;
}
.BlogCard {
  margin-top: 2vh;
}
#t3 {
  margin-top: 5vh;
}
#rebang {
  width: 18vw;
}
#rebang .el-link {
  margin: 10px;
}
.hottag {
  margin: 3px;
  cursor: pointer;
}
.el-pagination {
  margin-top: 1vh;
  margin-left: 24vw;
}
</style>
